<template>
	<view class="greyBox">
		<view class="topBlock">
			<view class="left" @click="screenPopup = true">
				筛选
				<view class="icon">
					<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_screen_supplier@2x.png"
						size="32"></u-icon>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="toDetails(item.id)">
				<view class="title">{{item.brand}}-{{item.series}}-{{item.model}}</view>
				<view class="subTitle">
					<view class="icon">
						<u-icon name="https://supply.zhongyimotor.com/upload/applet/pic_car_supplier@2x.png"
							size="32"></u-icon>
					</view>
					车架号 {{item.vin}}
				</view>
				<view class="arrow-right">
					<u-icon name="arrow-right" color="#8A8A8A" size="32"></u-icon>
				</view>
			</view>

		</view>
		<u-popup v-model="screenPopup" mode="top" :closeable="true">
			<view class="screenPopup">
				<view class="popupTitle">车辆记录筛选</view>
				<view>
					<view class="fieldTitle">车辆信息</view>
					<u-field label-width="0" v-model="pageForm.keyword" placeholder="请输入车辆信息"></u-field>
				</view>
				<view>
					<view class="fieldTitle">车架号</view>
					<u-field label-width="0" v-model="pageForm.vin" placeholder="请输入车架号"></u-field>
				</view>
				<view class="actions">
					<view class="button">
						<u-button size="medium" shape="circle" :custom-style="buttonStyleMediumD"
							@click="reset">重置</u-button>
					</view>
					<view class="button">
						<u-button size="medium" type="success" shape="circle" :custom-style="buttonStyleMedium"
							@click="handleSearch">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-empty src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
			v-if="list.length == 0" margin-top="-168" text="未查询到车辆数据"></u-empty>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import fileUpload from '@/components/fileUpload.vue'
	export default {
		components: {
			fileUpload
		},
		data() {
			return {
				screen: {
					id: ""
				},
				buttonStyleMediumD: {
					width: "300rpx",
					height: "86rpx",
					fontSize: "34rpx",
				},
				buttonStyleMedium: {
					width: "300rpx",
					height: "86rpx",
					color: "#FFF",
					background: "#0FBD7F",
					fontSize: "34rpx",
					boxShadow: "0rpx 4rpx 12rpx 0rpx rgba(1,139,31,0.5)"
				},
				list: [],
				screenPopup: false,
				pageForm: {
					current: 1,
					size: 999
				},
			}
		},
		onShow() {
			this.getCarList()
		},
		methods: {
			reset() {
				this.pageForm = {
					size: 999,
					current: 1
				}
				this.screenPopup = false;
				this.getCarList();
			},
			handleSearch() {
				this.getCarList();
				this.screenPopup = false;
			},
			getCarList() {
				let that = this;
				let params = that.pageForm;
				console.log(1)
				that.$api.getCarList(params).then((res) => {
					that.list = res.result.records;
				})
			},
			toDetails(id) {
				uni.navigateTo({
					url: '/pages/carList/details?id=' + id
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.list {
		.item {
			width: 690rpx;
			height: 130rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(217, 226, 233, 0.38);
			border-radius: 16rpx;
			margin: 0 auto 20rpx;
			padding: 20rpx 30rpx;
			position: relative;

			.arrow-right {
				height: 32rpx;
				width: 32rpx;
				position: absolute;
				top: 0;
				bottom: 0;
				right: 30rpx;
				margin-top: auto;
				margin-bottom: auto;
			}

			.title {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #202020;
				line-height: 36rpx;
				margin-bottom: 20rpx;
			}

			.subTitle {
				display: flex;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #8A8A8A;
				line-height: 34rpx;

				.icon {
					margin-right: 10rpx;
				}
			}
		}
	}

	.topBlock {
		display: flex;
		width: 690rpx;
		height: 68rpx;
		line-height: 68rpx;
		margin: 0 auto;

		.icon {
			margin-top: 5rpx;
		}

		.left {
			display: flex;

			.icon {
				margin-left: 8rpx;

			}
		}
	}

	.screenPopup {
		padding: 40rpx;

		.fieldTitle {
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #525252;
			margin: 30rpx 0;
		}

		/deep/.u-field {
			height: 72rpx !important;
			padding-top: 8rpx;
			padding-bottom: 8rpx;
			width: 670rpx !important;
		}

		.actions {
			display: flex;

			.button {
				margin: 80rpx auto;
			}
		}
	}
</style>